<template>
  <view>
    <view class="body_content">
      <view class="content_item" v-for="(item, index) in productList" :key="index"
        @tap="exchangeGood(item)">
        <view class="content_describe">
          <text class="content_describe_1"><text class="label">商品名称:</text> {{ item.productName }}</text>
          <text class="content_describe_1"><text class="label">兑换时间:</text> {{ item.createTime }}</text>
          <text class="content_describe_1"><text class="label">兑换状态:</text> {{ item.status == 0 ? '审核中' : '已完成' }}</text>
          <text class="content_describe_1"><text class="label">兑换积分:</text> {{ item.productIntegral }}</text>
          <text class="content_describe_1"><text class="label">备注:</text> {{ item.productIntegral }}</text>
        </view>
      </view>
      <list-footer :loadtitle="loadtitle"></list-footer>
    </view>
  </view>
</template>

<script>
import listFooter from '../../components/listFooter/listFooter.vue';
import {orderExchangeList} from '@/api/api.js'
  export default {
  components: { listFooter },
    data() {
      return {
        productList: [],
        page: 1,
        limit: 100,
        loading: false,
        loadend: false,
        loadtitle: '暂无数据',
      }
    },
    onShow() {
      this.getProductList()
    },
    methods: {
   
      getProductList(n) {
        if (this.loading)
          return;
        if (this.loadend)
          return;
        this.loading = true;
        this.loadtitle = "";
        uni.showLoading({
          title: '加载中...'
        })
        let data = {
        	page: this.page,
        	limit: this.limit,
        }
        orderExchangeList(data).then(res => {
          uni.hideLoading()
          let list = res.data.list
          let loadend = list.length < this.limit;
          this.productList = this.productList.concat(list)
          this.loadend = loadend;
          this.loading = false;
          this.loadtitle = loadend ? "到底啦，没有数据了~" : "加载更多"
        }).catch(err => {
        	console.log(err);
        });
      },
    }
  }
</script>

<style lang="scss">
  .label {
    font-size: 26rpx;
    color: #a4a4a4;
    margin-right: 30rpx
  }
.content_describe {
  display: flex;
  flex-direction: column;
  padding: 10rpx;
  border-radius: 4rpx;
  border: 1px solid #e4e4e4;
  margin: 20rpx auto 0;
  width: 710rpx;
  position: relative;
  &_1 {
    color: #515a6e;
    font-size: 26rpx;
  }
  &_3 {
    position: absolute;
    right: 20rpx;
    bottom: 20rpx;
    color: #FF774D;
  }
}
</style>
